<template>
  <div class="app-container">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <!--      <el-form-item label="设备归属水司" prop="tenantId">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.tenantId"-->
        <!--          placeholder="请输入设备归属水司"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item label="用户编号" prop="terminalID">
          <el-input
            v-model="queryParams.terminalID"
            placeholder="请输入设备编号"
            clearable
            style="width: 140px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="生产厂家" prop="supplierID">
          <el-select v-model="queryParams.supplierID" style="width: 140px;">
            <el-option v-for="item in dictData"
                       :key="item.dictValue"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="terminalName">
          <el-input
            v-model="queryParams.terminalName"
            placeholder="请输入设备名称"
            clearable
            style="width: 140px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="imei" prop="imei">
          <el-input
            v-model="queryParams.imei"
            placeholder="请输入imei"
            clearable
            style="width: 140px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--      <el-form-item label="使用状态" prop="terminalMark">-->
        <!--        <el-select v-model="queryParams.terminalMark" @keyup.enter.native="handleQuery">-->
        <!--          <el-option label="使用" :value="1"></el-option>-->
        <!--          <el-option label="停用" :value="0"></el-option>-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="是否有压力监测功能\r\n  1-是、0-否" prop="CurrentPressure">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.CurrentPressure"-->
        <!--          placeholder="请输入是否有压力监测功能\r\n  1-是、0-否"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item label="安装地址" prop="terminalInstallAddr">
          <el-input
            v-model="queryParams.terminalInstallAddr"
            placeholder="请输入安装地址"
            clearable
            style="width: 140px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--      <el-form-item label="安装日期" prop="terminalInstallDate">-->
        <!--        <el-date-picker clearable-->
        <!--                        v-model="queryParams.terminalInstallDate"-->
        <!--                        type="date"-->
        <!--                        value-format="yyyy-MM-dd"-->
        <!--                        placeholder="请选择安装日期">-->
        <!--        </el-date-picker>-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="纬度" prop="Lat">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.Lat"-->
        <!--          placeholder="请输入纬度"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="经度" prop="Lng">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.Lng"-->
        <!--          placeholder="请输入经度"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="终端位置-定位控件用" prop="LngLatTemp">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.LngLatTemp"-->
        <!--          placeholder="请输入终端位置-定位控件用"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item label="口径" prop="caliber">
          <el-input
            v-model="queryParams.caliber"
            placeholder="请输入口径"
            clearable
            style="width: 120px;"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--      <el-form-item label="采集频率：1分钟；5分钟；15分钟" prop="collectionFrequency">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.collectionFrequency"-->
        <!--          placeholder="请输入采集频率：1分钟；5分钟；15分钟"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="上传频率 ：1分钟；15分钟；60分钟；240分钟；480分钟" prop="uploadFrequency">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.uploadFrequency"-->
        <!--          placeholder="请输入上传频率 ：1分钟；15分钟；60分钟；240分钟；480分钟"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="备注" prop="reMark">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.reMark"-->
        <!--          placeholder="请输入备注"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['device:terminalsInfo:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['device:terminalsInfo:edit']"
          >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['device:terminalsInfo:remove']"
          >删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['device:terminalsInfo:export']"
          >导出
          </el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="terminalsInfoList" size="mini"
                border @selection-change="handleSelectionChange" :height="getAvailableHeight">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column type="index" width="40" align="center" label="#" :fixed="true"/>
        <!--      <el-table-column label="平台表单自增主键" align="center" prop="ID"/>-->
        <!--      <el-table-column label="设备归属水司" align="center" prop="tenantId"/>-->
        <el-table-column label="生产厂家" align="center" prop="supplierID" width="90">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.terminal_supplier" :value="scope.row.supplierID"/>
          </template>
        </el-table-column>
        <el-table-column label="用户编号" align="left" prop="terminalID" width="180">
          <!--        <template slot-scope="scope">-->
          <!--          <span>{{ scope.row.terminalID.substr(10) }}</span>-->
          <!--        </template>-->
        </el-table-column>
        <el-table-column label="设备编号" align="left" prop="easIonId"/>
        <el-table-column label="设备名称" align="left" prop="terminalName"/>
        <el-table-column label="imei" align="center" prop="imei" width="120"/>
        <!--      <el-table-column label="使用状态" align="center" prop="terminalMark"/>-->
        <!--      <el-table-column label="是否有压力监测功能\r\n  1-是、0-否" align="center" prop="CurrentPressure"/>-->
        <el-table-column label="安装地址" align="left" prop="terminalInstallAddr"/>
        <el-table-column label="安装日期" align="center" prop="terminalInstallDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.terminalInstallDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <!--      <el-table-column label="纬度" align="center" prop="Lat"/>-->
        <!--      <el-table-column label="经度" align="center" prop="Lng"/>-->
        <!--      <el-table-column label="终端位置-定位控件用" align="center" prop="LngLatTemp"/>-->
        <el-table-column label="口径(DN)" align="center" prop="caliber" width="80"/>
        <!--      <el-table-column label="设备类型" align="center" prop="moduleType"/>-->
        <el-table-column label="采集频率(分钟)" align="center" prop="collectionFrequency" width="110"/>
        <el-table-column label="上传频率(分钟)" align="center" prop="uploadFrequency" width="110"/>
        <el-table-column label="照片" align="center" prop="images" width="260">
          <template slot-scope="scope">
            <div v-if="scope.row.images !== null">
              <viewer :images="scope.row.images.split(';')" @inited="viewerInited">
                <img v-for="item in scope.row.images.split(';')" :src="getRealSrc(item)" width="50" height="50"
                     style="margin-right: 5px;">
              </viewer>
            </div>
            <span v-else>暂无照片</span>
          </template>
        </el-table-column>
        <el-table-column label="视频" align="center" prop="videos">
          <template slot-scope="scope">
            <div v-if="scope.row.videos !== null">
              <video-preview v-for="item in scope.row.videos.split(';')" :video-src="item" :width="200" :height="100"/>
            </div>
            <span v-else>暂无视频</span>
          </template>
        </el-table-column>
        <!--      <el-table-column label="使用性质" align="center" prop="useType"/>-->
        <!--      <el-table-column label="备注" align="center" prop="reMark"/>-->
        <!--      <el-table-column label="创建时间" align="center" prop="CreateDatetime" width="180">-->
        <!--        <template slot-scope="scope">-->
        <!--          <span>{{ parseTime(scope.row.CreateDatetime, '{y}-{m}-{d}') }}</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column label="操作" align="center" width="170" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['device:terminalsInfo:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['device:terminalsInfo:remove']"
            >删除
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-refresh"
              @click="handleDbReplace(scope.row)"
              v-hasPermi="['device:terminalsXbInfo:remove']"
            >换表
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page-sizes="[15, 30, 45, 60]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改大表档案对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="生产厂家" prop="supplierID">
                <el-select v-model="form.supplierID" placeholder="请选择生产厂家" style="width: 100%;">
                  <el-option v-for="dict in dict.type.terminal_supplier"
                             :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户编号" prop="terminalID">
                <el-input v-model="form.terminalID" placeholder="请输入用户编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="设备编号" prop="easIonId">
                <el-input v-model="form.easIonId" placeholder="请输入设备编号"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="设备名称" prop="terminalName">
                <el-input v-model="form.terminalName" placeholder="请输入设备名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="imei" prop="imei">
                <el-input v-model="form.imei" placeholder="请输入imei"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="使用状态" prop="terminalMark">
                <el-radio-group v-model="form.terminalMark">
                  <el-radio :label="1">使用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否带压力监测" prop="currentPressure">
                <el-radio-group v-model="form.currentPressure">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="安装地址" prop="terminalInstallAddr">
                <el-input v-model="form.terminalInstallAddr" placeholder="请输入安装地址"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装日期" prop="terminalInstallDate">
                <el-date-picker clearable
                                v-model="form.terminalInstallDate"
                                type="date"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择安装日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">

              <el-form-item label="地图定位" prop="LngLatTemp">
                <el-input v-model="form.lngLatTemp" readonly placeholder="请先进行定位">
                  <el-button slot="append" @click="handleLocatorClick">定位</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="经度" prop="Lng">
                <el-input v-model="form.lng" placeholder="请输入经度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="Lat">
                <el-input v-model="form.lat" placeholder="请输入纬度"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="采集频率" prop="collectionFrequency">
                <el-select v-model="form.collectionFrequency" placeholder="请选择采集频率">
                  <el-option label="1" :value="1">1</el-option>
                  <el-option label="5" :value="5">5</el-option>
                  <el-option label="15" :value="15">15</el-option>
                  <el-option label="30" :value="30">30</el-option>
                  <el-option label="60" :value="60">60</el-option>
                  <el-option label="120" :value="120">120</el-option>
                  <el-option label="240" :value="240">240</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上传频率" prop="uploadFrequency">
                <el-select v-model="form.uploadFrequency" placeholder="请选择上传频率">
                  <el-option label="1" :value="1">1</el-option>
                  <el-option label="15" :value="15">15</el-option>
                  <el-option label="60" :value="60">60</el-option>
                  <el-option label="120" :value="120">120</el-option>
                  <el-option label="240" :value="240">240</el-option>
                  <el-option label="480" :value="480">480</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="口径(DN)" prop="caliber">
                <el-input v-model="form.caliber" placeholder="请输入口径"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="reMark">
                <el-input type="textarea" :rows="3" v-model="form.reMark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="照片" prop="images">
                <image-upload v-model="form.images" :limit="10" :fileSize="100"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="视频" prop="videos">
                <file-upload v-model="form.videos" :limit="10" :fileSize="100" :fileType="['mp4']"></file-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <Locator :dialogShow.sync="siteDialog" @locationSure="locationSure" :primitiveData="primitiveData"></Locator>
      <DeviceReplace ref="refDbDeviceReplace" :callback="getList"/>
    </ContentWrap>
  </div>
</template>

<script>
import {
  listTerminalsInfo,
  getTerminalsInfo,
  delTerminalsInfo,
  addTerminalsInfo,
  updateTerminalsInfo
} from "@/api/leakage/terminalsInfo";
import DeviceReplace from '../../components/DeviceReplace'
import {getDicts as getDicts} from '@/api/system/dict/data'
import Locator from "@/components/L7Maps/Locator.vue";
import {isExternal} from "@/utils/validate";

export default {
  name: "TerminalsInfo",
  components: {
    Locator,
    DeviceReplace
  },
  dicts: ['terminal_supplier'],
  data() {
    return {
      screenHeight: null,
      dictData: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 大表档案表格数据
      terminalsInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        tenantId: null,
        supplierID: null,
        terminalID: null,
        terminalName: null,
        terminalMark: null,
        CurrentPressure: null,
        terminalInstallAddr: null,
        terminalInstallDate: null,
        Lat: null,
        Lng: null,
        LngLatTemp: null,
        caliber: null,
        moduleType: null,
        collectionFrequency: null,
        uploadFrequency: null,
        useType: null,
        reMark: null,
        CreateDatetime: null,
        imei: null
      },
      // 表单参数
      form: {
        terminalMark: 1,
        currentPressure: 1,
      },
      // 表单校验
      rules: {
        tenantId: [
          {required: true, message: "设备归属水司不能为空", trigger: "blur"}
        ],
        supplierID: [
          {required: true, message: "生产厂家不能为空", trigger: "blur"}
        ],
        terminalID: [
          {required: true, message: "用户编号不能为空", trigger: "blur"}
        ],
        easIonId: [
          {required: true, message: "设备编号不能为空", trigger: "blur"}
        ],
      },
      siteDialog: false,
      primitiveData: {}
    };
  },
  created() {
    this.getList();
    this.getDictData();
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getAvailableHeight() {
      return this.screenHeight - 236
    },
  },
  methods: {
    getDictData() {
      getDicts('terminal_supplier').then(res => {
        this.dictData = res.data
      })
    },
    /** 查询大表档案列表 */
    getList() {
      this.loading = true;
      listTerminalsInfo(this.queryParams).then(response => {
        this.terminalsInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tenantId: null,
        supplierID: null,
        terminalID: null,
        terminalName: null,
        terminalMark: 1,
        currentPressure: 1,
        terminalInstallAddr: null,
        terminalInstallDate: null,
        lat: null,
        lng: null,
        lngLatTemp: null,
        caliber: null,
        moduleType: null,
        collectionFrequency: null,
        uploadFrequency: null,
        useType: null,
        reMark: null,
        createDatetime: null,
        imei: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加大表档案";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ID = row.id || this.ids
      getTerminalsInfo(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改大表档案";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTerminalsInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTerminalsInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.id || this.ids;
      this.$modal.confirm('是否确认删除大表档案编号为"' + IDs + '"的数据项？').then(function () {
        return delTerminalsInfo(IDs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('device/terminalsInfo/export', {
        ...this.queryParams
      }, `terminalsInfo_${new Date().getTime()}.xlsx`)
    },
    handleLocatorClick() {
      this.siteDialog = true
    },
    locationSure(val) {
      // 定位地址
      this.form.lngLatTemp = val.longitude + ',' + val.latitude
      this.form.lng = val.longitude
      this.form.lat = val.latitude
      this.$forceUpdate()
    },
    handleDbReplace(row) {
      this.$refs.refDbDeviceReplace.openDialog(1, row)
    },
    viewerInited(viewer) {
    },
    getRealSrc(item) {
      if (isExternal(item)) {
        return item
      }
      return process.env.VUE_APP_BASE_API + item
    }
  },
};
</script>
